<template>
  <div class="node-panel">
    <div v-for="(item, index) in nodeList" :key="index">
      <div class="node-panel-divSpan">
        <span v-if="index == 0">开始节点</span>
        <span v-else-if="index == 1">基础节点</span>
        <span v-else>结束节点</span>
      </div>
     <div class="node-item-div">
      <div v-for="(ite, inde) in item" :key="inde" class="node-item-div-s">
        <div class="node-item" @mousedown="$_dragNode(ite)">
          <div class="node-item-icon" :class="ite.class">
            <div v-if="ite.type === 'user' || ite.type === 'time'" class="shape"></div>
          </div>
          <span class="node-label">{{ ite.text }}</span>
        </div>
      </div>
     </div>
     
    </div>
  </div>
</template>
<script>
export default {
  name: "NodePanel",
  props: {
    lf: Object,
    nodeList: Array,
  },
  methods: {
    $_dragNode(item) {
      this.$props.lf.dnd.startDrag({
        type: item.type,
      });
    },
  },
  mounted() {
    console.log(this.nodeList, 11111);
  },
};
</script>
<style>
.node-panel {
  position: absolute;
  top: 50px;
  left: 3px;
  /* 修改左侧分类样式 */
  /* width: 65px; */
  width: 140px;
  padding: 20px 10px;
  background-color: white;
  /* box-shadow: 0 0 10px 1px rgb(228, 224, 219); */
  /* border-radius: 6px; */
  /* text-align: center; */
  /* z-index: 101; */
}

.node-item-div {
  width: 253px;
  display: flex;
  flex-wrap:wrap;
}
.node-item-div-s{
  margin-left: 10px;
}
.node-item:hover{
  border: red solid 1px;
}
.node-panel-divSpan {
  margin-bottom: 10px;
  font-size: 12px;
  color: #999;
}

.node-item {
  /* 修改左侧分类样式 */
  padding: 5px;
  width: 116px;
  margin-bottom: 20px;
  display: flex;
  border: #e8e9eb solid 1px;
  border-radius: 10%
}

.node-item-icon {

  /* 修改左侧分类样式 */
  /* width: 30px;
  height: 30px; */
  /* margin-left: 10px; */
  width: 25px;
  height: 25px;
  background-size: cover;
}

.node-label {
  font-size: 12px;
  margin-top: 5px;
  user-select: none;
  /* 修改左侧分类样式 */
  margin-left: 10px;
}

.node-start {
  background: url("../background/start.png") no-repeat;
  background-size: cover;
}

.node-rect {
  border: 1px solid black;
}

.node-task {
  background: url("../background/task.png") no-repeat;
  background-size: cover;
}

.node-ifelse {
  width: 30px;
  height: 30px;
  /* 修改左侧分类样式 */
  /* margin-left: 6px; */
  background: url("../background/ifelse.png") no-repeat;
  background-size: cover;
}

.node-switch {
  background: url("../background/switch.png") no-repeat;
  background-size: cover;
}

.node-user {
  background: url("../background/user.png") no-repeat;
  background-size: cover;
}

.node-time {
  background: url("../background/time.png") no-repeat;
  background-size: cover;
}

.node-push {
  background: url("../background/push.png") no-repeat;
  background-size: cover;
}

.node-download {
  background: url("../background/download.png") no-repeat;
  background-size: cover;
}

.node-click {
  background: url("../background/click.png") no-repeat;
  background-size: cover;
}

.node-end {
  background: url("../background/end.png") no-repeat;
  background-size: cover;
}

.bpmn-start {
  background: url() center center no-repeat;
  cursor: grab;
}

.bpmn-end {
  background: url() center center no-repeat;
  cursor: grab;
}

.bpmn-user {
  background: url() center center no-repeat;
  cursor: grab;
}

.bpmn-exclusiveGateway {
  background: url() center center no-repeat;
  cursor: grab;
}
</style>
